<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p ref="p">count:{{count}}</p>
        <p>doubleCount:{{doubleCount}}</p>
        <p>tripleCount:{{tripleCount}}</p>
        <p>
            <button @click="addCount">count++</button>
        </p>
    </div>
</body>
<script>
    // Vue的两大特征
    // 初始化渲染
    // 响应式


    // Vue的生命周期
    // 1. 初始化渲染  (初始化阶段  模版编译  挂载阶段)
    // 2. 更新阶段 
    // 3. 销毁阶段

    // Vue生命周期钩子函数  => 回调函数
    // 1. 不管是否存在生命周期钩子函数, Vue实例的生命周期都会正常执行
    // 2. 生命周期钩子函数(回调函数), 可以帮助我们查看不同阶段Vue实例的区别,还可以执行一些副作用操作

    // Vue的生命周期
    // 1. 初始化渲染  (初始化阶段  模版编译  挂载阶段)
    // beforeCreate   => 是Vue实例中第一个执行的钩子函数,发生在实例化对象创建之后, new Vue(options)配置对象解析之前, 此时只有Vue实例,相关的数据 方法 计算属性 数据监听还没有配置

    // created   =>  发生在实例化对象创建之后,此时 new Vue(options)中的配置对象已经被解析,此时 相关的数据 方法 计算属性 数据监听已经可以使用
    //              在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

    // beforeMount  => 页面挂载前执行,此时相关的render函数首次被调用, 将模版解析为虚拟DOM

    // mounted  => 页面挂载之后调用, 此时虚拟DOM已经被解析为真实DOM, 这时 el 被新创建的 vm.$el 替换了。(解析后的真实dom,替换了原本的挂载的元素)

    // 2. 更新阶段 
    // beforeUpdate => 发生在数据改变后,视图更新前, 此时视图还未更新,页面中的内容是更新前的内容  
    // updated      => 发生在数据改变,视图更新之后, 此时视图已经更新,页面中的内容是更新后的内容

    // 注意: 不建议在此阶段再次更新数据   


    // 3. 销毁阶段


    var app = new Vue({ // {}
        el: "#app",
        data: {
            count: 1,
        },
        methods: {
            addCount() {
                this.count++
            }
        },
        computed: {
            doubleCount: function () {
                return this.count * 2;
            },
            tripleCount: function () {
                return this.count * 3;
            }
        },
        watch: {
            count: function (newVal, oldVal) {
                console.log("侦听到count发生改变", newVal, oldVal);
            }
        },
        beforeUpdate: function () {
            console.groupCollapsed("beforeUpdate")
            console.log("5. beforeUpdate:实例", this);
            console.log("5. beforeUpdate:数据", this.count);
            console.log("5. beforeUpdate:方法", this.addCount);
            console.log("5. beforeUpdate:计算属性", this.doubleCount);
            console.log("5. beforeUpdate:$el", this.$el);
            console.log("5. beforeUpdate:$el的html", this.$el.innerHTML);
            console.groupEnd("beforeUpdate");
            // this.count++;

        },
        updated: function () {
            console.groupCollapsed("updated")
            console.log("6. updated:实例", this);
            console.log("6. updated:数据", this.count);
            console.log("6. updated:方法", this.addCount);
            console.log("6. updated:计算属性", this.doubleCount);
            console.log("6. updated:$el", this.$el);
            console.log("6. updated:$el的html", this.$el.innerHTML);
            console.groupEnd("updated")


        }




    })



</script>

</html>